<template>
  <div class="main-container">
    <div class="location-and-id-summary">
      <!-- <span>识别地点与ID统计</span> -->
      <div class="topimg">识别地点与ID详情</div>
      <div class="content">
        <el-table
          :data="location_tableData"
          height="350px"
          class="location-table"
        >
          <el-table-column>
            <el-table-column prop="username" label="用户" width="120" />
            <el-table-column prop="address" label="识别地点" />
            <el-table-column prop="addressID" label="地点ID" />
            <el-table-column prop="shedNo" label="称重器ID" />
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { fishWeightApi } from "@/api/fishWeight";
import { ref, onMounted } from "vue";

const location_tableData = ref([]);

const getLocationStats = async () => {
  try {
    const response = await fishWeightApi.getLocationStatistics();
    location_tableData.value = response.data;
  } catch (error) {
    console.error("获取识别地点统计失败:", error);
  }
};

onMounted(() => {
  getLocationStats();
});
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.location-and-id-summary {
  width: 100%;
  height: 100%;
}

.location-and-id-summary span {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.content{
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
  border-radius: 10px;
}

.location-and-id-summary .content {
  width: 98%;
  padding: 0 1%;
  margin-top: 2%;
  /* background-color: #002163; */
}

/* 表格最外层容器 */
:deep(.el-table) {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border: none !important;
  border-radius: 10px;
}

:deep(.el-table tr),
:deep(.el-table th),
:deep(.el-table td) {
  background-color: transparent !important;
  border: none !important;
  color: whitesmoke !important;
  font-size: 18px !important; /* 增大字体大小 */
  padding: 12px 0 !important; /* 增加单元格内边距 */
}

:deep(.el-table th) {
  font-size: 20px !important; /* 增大表头字体大小 */
  font-weight: bold !important;
  padding: 15px 0 !important; /* 增加表头内边距 */
}

:deep(.el-table__border-left-patch),
:deep(.el-table__border-right-patch) {
  display: none !important;
}

:deep(.el-table__inner-wrapper),
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper) {
  border: none !important;
}

:deep(.el-table--border),
:deep(.el-table--border th),
:deep(.el-table--border td) {
  border: none !important;
}

:deep(.el-table::before),
:deep(.el-table::after) {
  display: none !important;
}

:deep(.el-table_2_column_5) {
  display: none !important;
}

:deep(.el-table__inner-wrapper::before){
  display: none;
}

:deep(.el-table__inner-wrapper::after){
  display: none !important;
  border: none !important;
}

.topimg{
  font-size: 24px;
  height: 40px;
  background-image: url(@/assets/top.png);
  background-size: cover;
  text-align: center;
}
</style>